<template>
    <scroll-view scroll-y class="scroll_view" :style="{ paddingBottom: safeAreaInsets.bottom + 'px' }">
        <view class="books_user" v-if="userList[0] && userList[0].children.length > 0">
            <view class="schools_item" v-for="(ele, index) in userList" :key="index">
                <view class="school_name">{{ ele.orgName }}</view>
                <view class="teacher_msg" @tap="handlePhone(item)" v-for="(item, idx) in ele.children" :key="idx">
                    <view class="left_teacher_zw">
                        <text class="username">{{ item.name }}</text>
                        <text class="userzw">{{ item.userPost }}</text>
                    </view>
                    <view class="right_phone">
                        <image class="phone" src="@/static/images/phone.png" />
                    </view>
                </view>
            </view>
        </view>
        <fl-empty v-else />
    </scroll-view>
</template>
  
<script setup>
const { safeAreaInsets } = uni.getSystemInfoSync()
const props = defineProps({
    userList: {
        type: Array,
        default: () => [
            {
                orgName: '',
                children: []
            }
        ]
    }
})
console.log(props.userList, 'userListuserListuserList');
const $emit = defineEmits(['hanlePhone'])
const handlePhone = (ele) => {
    let telArr = [ele.officePhone, ele.cellPhone]
    uni.showActionSheet({
        title: '电话号码',
        itemList: [ele.officePhone, ele.cellPhone],
        success: (res) => {
            uni.makePhoneCall({
                phoneNumber: telArr[res.tapIndex],
                success: (res) => { },
                fail: (err) => { }
            })
        }
    });
}
</script>
  
<style lang="scss">
.scroll_view {
    height: 100%;
    overflow: hidden;

    .books_user {
        width: 92%;
        margin: 0 auto;
        height: 100%;

        .schools_item {

            .school_name {
                color: #666666;
                font-size: 26rpx;
                margin: 28rpx 0 15rpx;
            }

            .teacher_msg {
                display: flex;
                height: 140rpx;
                border-bottom: 2rpx solid #EBEDF0;

                .left_teacher_zw {
                    flex: 1;
                    display: flex;
                    flex-direction: column;

                    .username {
                        color: #000000;
                        font-size: 28rpx;
                        margin: 20rpx 0 15rpx 0;
                    }

                    .userzw {
                        color: #999;
                        font-size: 28rpx;
                    }
                }

                .right_phone {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 80rpx;
                    height: 140rpx;

                    .phone {
                        overflow: hidden;
                        width: 65rpx;
                        height: 65rpx;
                        border-radius: 50%;
                    }
                }
            }
        }
    }
}
</style>
  